<template>
  <div class="table-demo">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item></el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--列表-->
    <div class="table-demo2">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="id" editable>
          <template v-slot="{ row }">
            <span>{{ row.adid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" editable>
          <template v-slot="{ row }">
            <span>{{ row.adname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" editable>
          <template v-slot="{ row }">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理的宠物名称" editable>
          <template v-slot="{ row }">
            <span>{{ row.petname }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="removeRow(scope.$index)" type="text" size="small"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="showDialog(scope.$index)"
              >编辑</el-button
            >
            <el-dialog
              :title="dialogTitle"
              :visible.sync="dialogVisible"
              :modal-append-to-body="false"
            >
              <h1>请在宠物管理界面修改</h1>
              <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleConfirm"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <div class="space"></div>
      <div>
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 1000,
      props: ["tableData"],
      dialogVisible: false, //控制弹窗
      dialogTitle: "", //弹窗标题
      formLabelWidth: "120px",
      editAddress: {}, // 编辑的地址信息（初始化为空对象）
      // dialogTableVisible: false,
      // dialogFormVisible: false,
      list: ["睡觉", "敲代码", "吃饭"],
      inputValue: "好好学习，天天向上",

      tableData: [],

      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        deptNo: [{ required: true, message: "请输入商品id", trigger: "blur" }],
      },
      formInline: {},
      editData: {},
      // 删除部门
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // show() {
    //   this.$axios
    //     .get("/pet/query")
    //     .then((response) => {
    //       this.tableData = response.data.data;
    //     })
    //     .catch((error) => {
    //       console.error(error);
    //     });
    // },
    //
    showDialog(index) {
      this.editData = {
        ...this.tableData[index],
        index,
      };
      this.dialogTitle = "编辑";
      this.dialogVisible = true;
      console.log(this.editData);
      //
    },

    handleCancel() {
      this.dialogVisible = false;
    },
    handleConfirm() {
      this.tableData.splice(this.editData.index, 1, this.editData);
      const _this = this;
      this.$axios.post(`/pet/update`, this.editData).then(function (response) {
        if (response) {
          _this.dialogVisible = false;
          _this.$notify({
            title: "成功",
            message: "成功修改一条记录",
            type: "success",
          });
        }
      });
      // this.dialogVisible = false; // 成功提交表单后，关闭对话框
    },
    //
    add() {
      const vm = this;
      console.log(this.formInline);
      this.$axios
        .post("/pet/add", this.formInline)
        .then(function (response) {
          if (response.status === 200) {
            vm.tableData.push(vm.formInline);
            vm.formInline = {};
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    removeRow(index) {
      // const row = this.tableData[index]; // 获取要删除的行数据
      // 从数据中删除该行
      // this.tableData.splice(index, 1);
      // console.log(this.tableData[index].id);
      this.$axios
        .delete(`/pet/del/${this.tableData[index].petid}`)
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
  mounted() {
    this.$axios
      .get("/pet/query")
      .then((response) => {
        this.tableData = response.data.data;
        console.log(this.tableData);
      })
      .catch((error) => {
        console.error(error);
      });
  },
  alldelete: function () {
    this.list = [];
  },
};
</script>
<style>
.table-demo {
  margin: 20px;
}
.table-demo {
  position: absolute;
  width: 1400px;
  margin: 20px;
}
input.el-input__inner {
  width: 150px;
}
.table-demo2 {
  margin-top: 20px;
}
</style>
